<template>
	<layout>
		<simple-toolbar :title="$t('user.newPersonInfo')">
			<view class="returnToConfirm">
				<el-button @click="navBack">{{ $t('user.return') }}</el-button>
				<el-button @click="verify" type="primary" :disabled="success">{{ $t('user.confirm') }}</el-button>
			</view>
		</simple-toolbar>
		<view class="pad-base form">
			<el-form :model="formData" :rules="rules" ref="formData" label-position="top">
				<el-form-item :label="$t('user.email')" required>
					<el-input v-model="userInfo.email" disabled></el-input>
				</el-form-item>
				<!-- <el-form-item :label="$t('user.user_name')" prop="user_name">
					<el-input v-model="formData.user_name" :placeholder="$t('user.user_name_pla')"></el-input>
				</el-form-item> -->
				<el-form-item :label="$t('user.first_name')" prop="first_name">
					<el-input v-model="formData.first_name" :placeholder="$t('user.first_name_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.last_name')" prop="last_name">
					<el-input v-model="formData.last_name" :placeholder="$t('user.last_name_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.dob')" prop="dob" class="formDate">
					<!-- <el-date-picker v-model="formData.dob" value-format="yyyy-MM-dd" type="date" :placeholder="$t('user.dob_pla')"></el-date-picker> -->
					<el-date-picker v-model="dobDate.year" type="year" format="yyyy" value-format="yyyy" @change="dobDateChange" :placeholder="$t('global.year')"></el-date-picker>
					<el-date-picker v-model="dobDate.month" type="month" format="MM" value-format="MM" @change="dobDateChange" :placeholder="$t('global.month')"></el-date-picker>
					<el-date-picker v-model="dobDate.day" type="date" format="dd" value-format="dd" @change="dobDateChange" :placeholder="$t('global.day')"></el-date-picker>
				</el-form-item>
				<el-form-item :label="$t('user.phone')" prop="phone">
					<el-input v-model="formData.phone" type="number" :placeholder="$t('user.phone_pla')"></el-input>
				</el-form-item>
				<!-- <el-form-item :label="$t('user.wallet')" prop="wallet">
					<el-input v-model="formData.wallet" :placeholder="$t('user.wallet_pla')"></el-input>
				</el-form-item> -->
				<view>
					<view class="tips">{{ $t('user.tips') }}</view>
					<el-form-item :label="$t('user.autowithdraw')" prop="autowithdraw" required>
						<el-radio v-model="formData.autowithdraw" :label="false">{{ $t('user.no') }}</el-radio>
						<el-radio v-model="formData.autowithdraw" :label="true">{{ $t('user.yes') }}</el-radio>
					</el-form-item>
				</view>
			</el-form>
		</view>

		<el-dialog :title="$t('user.dialogTitle')" :visible.sync="dialogVisible" width="30%" :closeOnClickModal='false'>
			<view style="word-break: break-word;">{{ $t('user.dialog') }}</view>
			<view slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">{{ $t('user.cancel') }}</el-button>
				<el-button type="primary" @click="confirm">{{ $t('user.determine') }}</el-button>
			</view>
		</el-dialog>
		
		<auth ref="auth" :customAction="true" @authSuccess="handleAuthSuccess" :user_id="userInfo.user_id" :email="userInfo.email"></auth>
	</layout>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import {
		createProfile,
		updateProfile
	} from "../../../js_sdk/uni-admin/user.js"

	export default {
		data() {
			// let validator = (rule, value, callback) => {
			// 	if (value === '') {
			// 		callback(new Error(this.$t('user.user_name_pla')))
			// 	}
			// 	callback()
			// }
			return {
				dialogVisible: false,
				success: false,
				dobDate: {
					year: '',
					month: '',
					day: '',
				},
				formData: {
					// user_name: '',
					first_name: '',
					last_name: '',
					dob: '',
					phone: '',
					wallet: '',
					autowithdraw: false
				},
				rules: {
					wallet: [{
						required: true,
						// message: this.$t('user.wallet_pla'),
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('user.wallet_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			...mapMutations('user', ['SET_USER_INFO']),
			dobDateChange() {
				if (!(this.dobDate.year && this.dobDate.month && this.dobDate.day)) {
					this.formData.dob = ''
					return
				}
				this.formData.dob = this.dobDate.year + '-' + this.dobDate.month + '-' + this.dobDate.day
			},
			handleAuthSuccess() {
				// this.authSuccess = true
				// this.dialogVisible = true
				this.confirm()
			},
			async confirm() {
				this.dialogVisible = false
				this.formData.user_id = this.userInfo.user_id
				this.formData.phone = this.formData.phone * 1
				if (!this.formData.account) {
					let obj = this.formData
					if (!obj.dob) {
						delete obj.dob
					}
					if (!obj.wallet) {
						delete obj.wallet
					}
					try{
						let res = await createProfile(obj)
						let info = {
							...this.userInfo
						}
						Object.assign(info, res.data)
						this.SET_USER_INFO(info)
					}catch(e){
						//TODO handle the exception
					}
					
				} else {
					let obj = {
						user_id: this.formData.user_id,
						// user_name: this.formData.user_name,
						first_name: this.formData.first_name,
						last_name: this.formData.last_name,
						dob: this.formData.dob,
						phone: this.formData.phone,
						wallet: this.formData.wallet,
						autowithdraw: this.formData.autowithdraw
					}
					try{
						let res = await updateProfile(obj, obj.user_id)
						let info = {
							...this.userInfo
						}
						Object.assign(info, res.data)
						this.SET_USER_INFO(info)
					}catch(e){
						//TODO handle the exception
					}
				}
				this.success = true
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			verify() {
				this.$refs.formData.validate(valid => {
					if (!valid) return
					if (!this.authSuccess) {
						this.$refs.auth.startAuth()
					} else {
						this.dialogVisible = true
					}
				});
			},
			navBack() {
				uni.navigateBack()
			}
		},
		onLoad(option) {
			if (!option.data) return
			let data = JSON.parse(decodeURIComponent(option.data));
			if (data.dob) {
				let dateSegs = data.dob.split('-')
				this.dobDate = {
					year: dateSegs[0],
					month: dateSegs[1],
					day: dateSegs[2]
				}
			}
			this.formData = data
		}
	}
</script>

<style lang="scss" scoped>
	.tips {
		position: absolute;
		height: 10.54rpx;
		line-height: 10.54rpx;
		font-size: 4.68rpx;
		left: 13%;
		margin-top: 1.17rpx;
		color: #3B3E66;
	}
</style>
